<template>
    <div class="book-detail">
      <h1>{{ book.title }}</h1>
      <p><strong>Author:</strong> {{ book.author }}</p>
      <p><strong>Description:</strong> {{ book.description }}</p>
      <p><strong>Published Date:</strong> {{ book.publishedDate }}</p>
      <button @click="goBack">Back to List</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'BookDetail',
    props: {
      book: {
        type: Object,
        required: true
      }
    },
    methods: {
      goBack() {
        this.$emit('back');
      }
    }
  }
  </script>
  
  <style scoped>
  .book-detail {
    padding: 20px;
  }
  </style>